<template>
	<view>
		<view class="context">
			<view v-if="loginStatus">
				<view class="account-info">
					<view class="avatar" @click="toHomePage">
						<image :src="avatar"></image>
					</view>
					<view class="nickname" @click="toHomePage">
						{{nickname.length<6 ? nickname : nickname.substr(0, 5) + '...'}}
					</view>
					<view class="homepage" @click="toHomePage">
						<uni-icons type="forward" size="18" color="#cecdd3"></uni-icons>
						个人主页
					</view>
					<view class="checkout" @click="checkout">
						退出登陆

					</view>
				</view>
				<view class="features">
					<view class="feature">
						<text class="count">8</text>
						<text class="feature">评论</text>
					</view>
					<view class="bar">

					</view>
					<view class="feature">
						<text class="count">38</text>
						<text class="feature">收藏</text>
					</view>
				</view>
			</view>
			<view v-else class="login">
				<view class="title">
					您尚未登陆，请先登陆
				</view>
				<view class="methods">
					<view class="item" @click="toPhone">
						<text style="font-size: 40rpx;" class="iconfont icon-shouji"></text>
					</view>
					<view class="item" @click="toPassword">
						<text style="font-size: 40rpx;" class="iconfont icon-mima"></text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				loginStatus: false,
				nickname: '',
				avatar: ''
			}
		},
		methods: {
			checkout() {
				var that = this
				uni.removeStorage({
					key: 'login-status',
					success() {
						uni.showToast({
							title: '您已退出登陆',
							icon: 'none'
						})
						that.isLogin()
					},
					complete() {
						uni.removeStorage({
							key: 'user-obj'
						})
					}
				})
			},
			toPhone() {
				uni.navigateTo({
					url: '../login/login',
					animationType: 'slide-in-right'
				})
			},
			toPassword() {
				uni.navigateTo({
					url: '../passwordLogin/passwordLogin',
					animationType: 'slide-in-right'
				})
			},
			isLogin() {
				var that = this
				uni.getStorage({
					key: 'login-status',
					success(res) {
						that.loginStatus = res.data
					},
					fail() {
						that.loginStatus = false
					}
				})
			},
			userInfo() {
				if (this.loginStatus) {
					uni.getStorage({
						key: 'user-obj',
						success: res => {
							this.nickname = res.data.nickname
							this.avatar = res.data.avatar
						}
					})
				}
			},
			toHomePage() {
				uni.navigateTo({
					url: '../homepage/homepage',
					animationType: 'slide-in-right',
				})
			}
		},
		onShow() {
			this.isLogin()
			this.userInfo()
		},
	}
</script>

<style lang="scss">
	.checkout {
		position: fixed;
		top: 100rpx;
		right: 40rpx;
		z-index: 999;
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		// #ifdef MP-WEIXIN
		top: 420rpx;
		left: 40rpx;
		width: 200rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin: 0 auto;
		text-align: center;
		// #endif
	}

	.context {
		padding: 80rpx 30rpx;
		padding-bottom: 40rpx;
		// #ifdef MP-WEIXIN
		padding-bottom: 80rpx;
		// #endif
		border-bottom-left-radius: 10rpx;
		background-color: #fdfbff;
		border-bottom-right-radius: 10rpx;

		.account-info {
			padding: 40rpx 30rpx;
			padding-bottom: 0rpx;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			align-items: center;


			.avatar {
				border-radius: 50%;

				image {
					border-radius: 50%;
					height: 150rpx;
					width: 150rpx;
				}
			}

			.nickname {
				color: $uni-text-color;
				font-size: $title;
				padding-left: 30rpx;
				font-weight: 900;
			}

			.homepage {
				display: inline-flex;
				align-items: center;
				flex-direction: row-reverse;
				flex-grow: 10;
				// padding-top: 20rpx;
				// align-self: flex-start;
				font-size: $uni-font-size-base;

				text {
					padding: 0 10rpx;
				}

				color: #3b3b3b;
			}
		}

		.features {
			padding: 40rpx 30rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;

			.bar {
				background-color: #a2a2a2;
				margin: 15rpx 0;
				width: 2rpx;
			}

			.feature {
				flex-grow: 2;
				text-align: center;

				text {
					display: block;
				}
			}
		}

		.login {
			display: flex;
			// #ifdef MP-WEIXIN
			padding-top: 50rpx;
			// #endif
			flex-direction: column;

			.title {
				text-align: center;
				font-size: $uni-font-size-base;
			}

			.methods {
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;
				padding: 20rpx 0;
				justify-content: center;

				.item {
					text-align: center;
					width: 90rpx;
					margin: 0 50rpx;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					background-color: #e9e7eb;
					border-radius: 50%;
				}
			}

		}
	}
</style>
